<template>
  <div class="main">
    <div class="search">
        <form action="">
            <input type="text" placeholder="请输入关键字" name="search" />
            <input type="submit" value="搜索" name="submit" />
        </form>
    </div>
    <v-navbar></v-navbar>
    <div class="classify">
        <ul>
            <li v-for="item in classify" @click="item.toggle = !item.toggle">
                <p><a :href="item.link" class="title">{{ item.title }}</a></p>
                <div class="outher">
                    <div class="show">
                        <span v-for="item in item.show">
                            <a :href="item.link">{{ item.title }}</a>
                            <em>|</em>
                        </span>
                    </div>
                    <transition name="fade">
                        <div class="hide" v-if="item.hide" v-show="item.toggle">
                            <span v-for="items in item.hide">
                                <a :href="items.link">{{ items.title }}</a>
                                <em>|</em>
                            </span>
                        </div>
                    </transition>
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
  import vNavbar from './components/navbar'
  export default {
	data (){
		return {
            classify: [
                {
                    title: '服饰鞋帽 箱包奢品',
                    toggle: false,
                    link: '#/list_product?list=clothing',
                    show: [
                        {
                            link: '#/list_product?list=clothing&id=1',
                            title: '服装城'
                        },
                        {
                            link: '#/list_product?list=clothing&id=2',
                            title: '运动馆'
                        },
                        {
                            link: '#/list_product?list=clothing&id=3',
                            title: '箱包皮具'
                        },
                        {
                            link: '#/list_product?list=clothing&id=4',
                            title: '珠宝馆'
                        }
                    ],
                    hide: [
                        {
                            link: '#/list_product?list=clothing&id=5',
                            title: '品质男装'
                        },
                        {
                            link: '#/list_product?list=clothing&id=6',
                            title: '潮流鞋靴'
                        },
                        {
                            link: '#/list_product?list=clothing&id=7',
                            title: '时尚女装'
                        }
                    ]   
                },
                { 
                    title: '床品家纺 家居日用',
                    toggle: false,
                    link: '#/list_product?list=bedding',
                    show: [
                        {
                            link: '#/list_product?list=bedding&id=1',
                            title: '居家家纺'
                        },
                        {
                            link: '#/list_product?list=bedding&id=2',
                            title: '建材馆'
                        },
                        {
                            link: '#/list_product?list=bedding&id=3',
                            title: '家具家装馆'
                        }
                    ],
                    hide: [
                        {
                            link: '#/list_product?list=bedding&id=4',
                            title: '品质男装'
                        },
                        {
                            link: '#/list_product?list=bedding&id=5',
                            title: '潮流鞋靴'
                        }
                    ]   
                },
                { 
                    title: '食品酒水 母婴玩具',
                    toggle: false,
                    link: '#/list_product?list=food',
                    show: [
                        {
                            link: '#/list_product?list=food&id=1',
                            title: '食品粮油'
                        },
                        {
                            link: '#/list_product?list=food&id=2',
                            title: '酒水冲调'
                        },
                        {
                            link: '#/list_product?list=food&id=3',
                            title: '母婴用品'
                        }
                    ],
                    hide: [
                        {
                            link: '#/list_product?list=food&id=4',
                            title: '品质男装'
                        }
                    ]
                }, 
                {
                    title: '手机电器 生活办公',
                    toggle: false,
                    link: '#/list_product?list=life',
                    show: [
                        {
                            link: '#/list_product?list=life&id=1',
                            title: '电器城'
                        },
                        {
                            link: '#/list_product?list=life&id=2',
                            title: '厨卫电器'
                        },
                        {
                            link: '#/list_product?list=life&id=3',
                            title: '生活小家电'
                        }
                    ],
                    hide: [
                        {
                            link: '#/list_product?list=life&id=4',
                            title: '手机'
                        }
                    ]
                },
                { 
                    title: '汽车整车 保养配件',
                    toggle: false,
                    link: '#/list_product?list=automobile',
                    show: [
                        {
                            link: '#/list_product?list=automobile&id=1',
                            title: '整车服务'
                        },
                        {
                            link: '#/list_product?list=automobile&id=2',
                            title: '养护配件'
                        },
                        {
                            link: '#/list_product?list=automobile&id=3',
                            title: '美容清洁'
                        }
                    ],
                },
                {
                    title: '热销优惠 热价促销',
                    toggle: false,
                    link: '#/list_product?list=hot',
                    show: [
                        {
                            link: '#/list_product?list=hot&id=1',
                            title: '促销爆款'
                        },
                        {
                            link: '#/list_product?list=hot&id=2',
                            title: '精品推荐'
                        },
                        {
                            link: '#/list_product?list=hot&id=3',
                            title: '特价专区'
                        },
                        {
                            link: '#/list_product?list=hot&id=4',
                            title: '名品特卖'
                        }
                    ],
                },
            ]
        }
	},
	components : {	
        vNavbar
	}
  }
</script>
<style>
    .weui-grids:before,.weui-grids:after{
        border:none !important;
    }
    .search{
        width:100%; margin:.24rem auto .1rem; text-align:center;
    }
    .search input[type='text']{
        background:#fff; border:#d9d9d9 .02rem solid; vertical-align:middle; height:.22rem; width:2.11rem; line-height:.24rem; color:#666; text-indent:.05rem; -webkit-outline:none;-o-outline:none;-ms-outline:none;outline:none; font-size:.12rem;
    }
    .search input[type='submit']{
        width:.5rem; height:.27rem; font-size:.12rem; margin-left:-0.04rem; vertical-align:middle; background:#5A5A5A; color:#fff; display:inline-block; border:none;
    }
    .classify{
        padding:0 .08rem; margin:.24rem auto .2rem;
    }
    .classify li{
        padding:.06rem 0 .06rem .1rem; margin:0 0 .1rem; border-bottom:.01rem solid #e9e9e9; 
    }
    .classify li>p{
        background:url('../assets/icon.png')center right no-repeat;
    }
    .classify li .title{
        color:#000; height:.32rem; line-height:.32rem; font-size:.15rem;
    }
    .classify li a:hover,.classify li .outher a:hover{
        color:#F15433;
    }
    .classify li .outher{
        overflow:hidden;
    }
    .classify li .outher div{
        line-height:.24rem;
    }
    .classify li .outher div span:last-child em{
        display:none;
    }
    .classify li .outher a{
        color:#666; font-size:.13rem;
    }
    .classify li .outher em{
        color:#E9E9E9; margin:0 .05rem; font-style:normal;
    }
    .classify li .outher .hide{
        margin:.2rem 0 0;
    }
    .fade-enter-active, .fade-leave-active {
      transition: opacity .3s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
</style>
